<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口测试页面</title>
    <style>
        [v-cloak]{display: none}
        .defheight {
            height: 100px;
            overflow: scroll;
        }
        .container h1{
            width: 100%;
            text-align: center;
        }
        .container p{
            font-size: 16px;
        }
    </style>
    <link rel="stylesheet" href="http://127.0.0.1:3000/public/css/bootstrap.min.css">
</head>
<body>
<div id="test" class="container">
    <h1 >接口测试页面汇总</h1>
    <p>最新运行结果为(运行时间:)<span v-cloak>{{datatime}}</span></p>

    <div class="row">
        <div class="col-md-8">
            <table class="table" >
                <thead>
                <th>用例描述</th>
                <th>测试结果</th>
                </thead>
                    <tbody >
                    <tr :class="hisclass[key%currentdata.length]" v-for="(value,key) in currentdata" :key="key">
                        <td v-cloak>{{value.description}}</td>
                        <td v-cloak>{{value.result}}</td>
                    </tr>
                    </tbody>
            </table>
        </div>
        <div class="col-md-4">
            <div id="main" style="width: 100%;height:300px;"></div>
        </div>
    </div>

    <p>历史记录:</p>
    <table class="table">
        <thead>
            <th>运行时间</th>
            <th>运行汇总</th>
        </thead>
        <tbody>
        <tr :class="hisclass[key%hisdata.length]" v-for="(value,key) in hisdata" :key="key">
            <td v-cloak>{{value.runtime}}</td>
            <td v-cloak>{{value.description}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="http://127.0.0.1:3000/public/js/vue.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:3000/public/js/axios.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:3000/public/js/echarts.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:"#test",
        data(){
            return {
                "msg":"helloworld",
                "datatime":"",
                "hisdata":[],
                "currentdata":[],
                "hisclass":['active','success','warning','danger','info'],
                "successrate":0,
                "failrate":0
            }
        },
        mounted(){
            this.getcurres()
            this.gethisres()
        },
        methods:{
            getcurres(){
                axios.get('http://127.0.0.1:3000/getcurresult').then(
                    (res) =>{
                        this.datatime = res.data.runtime
                        let tmp= res.data.case
                        for (var i in tmp){
                            this.currentdata.push(tmp[i])
                        }
                        let resrate = res.data.testcaseres
                        resrate = resrate[0].trim()  //去空格
                        pattern = /\d{1,3}\.\d{1,2}%/g
                        res = resrate.match(pattern)
                        this.successrate = parseInt(res[0].replace("%",""))
                        this.failrate = parseInt(res[1].replace("%",""))
                        this.renderchart()
                }
                )
            },
            gethisres(){
                axios.get('http://127.0.0.1:3000/gethistorydata').then(
                    (res) =>{
                        let tmp = res.data.data.records
                        for (var i in tmp){
                            this.hisdata.push(tmp[i])
                        }
                    }
                )
            },
            renderchart(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: -5,
                        data: ['成功率','失败率']
                    },
                    series: [
                        {
                            name: '测试结果',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: this.successrate, name: '成功率'},
                                {value: this.failrate, name: '失败率'}
                            ]
                        }
                    ]
                };
                console.log(this)
                console.log(this.successrate)
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    })

</script>
<!--共提供的接口:1.http://127.0.0.1:3000/getcurresult，查询当前最新数据，-->
<!--2.http://127.0.0.1:3000/gethistorydata ，查询历史上的数据-->

</body>
</html>